<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>
    <!-- layui -->
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <style>
        .show-num {
            font-size: 20px !important;
            font-weight: bold;
        }

        .newGianMountion .btm .btm-top {
            position: relative;
            height: 46px;
        }
    </style>
</head>

<body class="gray-bg">
<!--右侧主体-->

<div class="newGianMountion">
    <!--搜索区域-->
    <div class="row rowNew">
        <div class="col-sm-12 search-area">
            <form id="formId">
                <div class="select-list">
                    <ul class="ulForm clearfix">
                        <li class="select-time">
                            <label>选择时间： </label>
                            <div class="fl inputTime-outer">
                                <input type="text" class="time-input" th:value="${beginTime}" id="startTime"
                                       placeholder="开始时间"
                                       name="params[beginPlanTime]"/>
                                <div class="icon-rili"></div>
                            </div>
                            <span>--</span>
                            <div class="fl inputTime-outer">
                                <input type="text" class="time-input" th:value="${endTime}" id="endTime"
                                       placeholder="结束时间"
                                       name="params[endPlanTime]"/>
                                <div class="icon-rili"></div>
                            </div>
                            <div class="btn-outer fl">
                                <a class="btn btn-primary" style="margin-left: 24px;" onclick="reloadIt()">搜索</a>
                            </div>
                        </li>
                        <li class="btn-group">
                            <a class="thisYear btn btn-primary mlr_8">本年</a>
                            <a class="thisMonth btn btn-primary mlr_8">本月</a>
                            <a class="thisDay btn btn-primary mlr_8">本日</a>
                            <!--<a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>-->
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>

    <div class="btm">
        <div class="btm-top">
            <ul id="tabList" class="tabList clearfix">
                <li class="item active">合计计划(
                    <span class="show-num" th:text="${statusCount.total}"></span>
                    <span class="unit">个</span>)
                </li>
                <li class="item">待执行(
                    <span class="show-num" th:text="${statusCount.prePlan}">2000</span>
                    <span class="unit">个</span>)
                    )
                </li>
                <li class="item">执行中(
                    <span class="show-num" th:text="${statusCount.onPlan}">2000</span>
                    <span class="unit">个</span>)
                    )
                </li>
                <li class="item">已执行(
                    <span class="show-num" th:text="${statusCount.finished}">2000</span>
                    <span class="unit">个</span>)
                    )
                </li>
            </ul>
        </div>
        <div class="btm-content">

            <div class="tab-content active">
                <div class="row" style="margin: 0">
                    <div class="title col-lg-12 col-md-12 col-sm-12">
                        合计计划
                    </div>
                </div>
                <div class="row" style="padding: 86px 110px; padding-bottom: 0px;">
                    <div status="" class="item col-sm-6  col-lg-3" th:attr="caiId = *{class.caiId}"
                         onclick="detailInfo(this)"
                         th:each="class:${caiClass}">
                        <div class="item-box">
                            <div class="item-box-1">
                                <div class="left">
                                    <img alt="">
                                    <p th:text="${class.caiName}">瓜类</p>
                                    <div><span th:text="${class.planCounts.total}">186</span>个</div>
                                </div>
                                <div class="right" th:attr="code = *{class.code}">
                                    <p><span th:text="${class.planCounts.total_rate}+'%'">22.22%</span></p>
                                    <div class="record">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span class="last"
                                              th:style="'height:'+${class.planCounts.total_rate}*0.6+'px'"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


            <div class="tab-content">
                <div class="row" style="margin: 0">
                    <div class="title col-lg-12 col-md-12 col-sm-12">
                        待执行
                    </div>
                </div>

                <div class="row" style="padding: 86px 110px; padding-bottom: 0px;">
                    <div status="2" class="item col-sm-6  col-lg-3" th:attr="caiId = *{class.caiId}"
                         onclick="detailInfo(this)"
                         th:each="class:${caiClass}">
                        <div class="item-box">
                            <div class="item-box-1">
                                <div class="left">
                                    <img alt="">
                                    <p th:text="${class.caiName}">瓜类</p>
                                    <div><span th:text="${class.planCounts.prePlan}">186</span>个</div>
                                </div>
                                <div class="right" th:attr="code = *{class.code}">
                                    <p><span th:text="${class.planCounts.prePlan_rate}+'%'">22.22%</span></p>
                                    <div class="record">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span class="last"
                                              th:style="'height:'+${class.planCounts.prePlan_rate}*0.6+'px'"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="tab-content">
                <div class="row" style="margin: 0">
                    <div class="title col-lg-12 col-md-12 col-sm-12">
                        执行中
                    </div>
                </div>
                <div class="row" style="padding: 86px 110px; padding-bottom: 0px;">
                    <div status="3" class="item col-sm-6  col-lg-3" th:attr="caiId = *{class.caiId}"
                         onclick="detailInfo(this)"
                         th:each="class:${caiClass}">
                        <div class="item-box">
                            <div class="item-box-1">
                                <div class="left">
                                    <img alt="">
                                    <p th:text="${class.caiName}">瓜类</p>
                                    <div><span th:text="${class.planCounts.onPlan}">186</span>个</div>
                                </div>
                                <div class="right" th:attr="code = *{class.code}">
                                    <p><span th:text="${class.planCounts.onPlan_rate}+'%'">22.22%</span></p>
                                    <div class="record">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span class="last"
                                              th:style="'height:'+${class.planCounts.onPlan_rate}*0.6+'px'"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="tab-content">
                <div class="row" style="margin: 0">
                    <div class="title col-lg-12 col-md-12 col-sm-12">
                        已执行
                    </div>
                </div>
                <div class="row" style="padding: 86px 110px; padding-bottom: 0px;">
                    <div status="4" class="item col-sm-6  col-lg-3" th:attr="caiId = *{class.caiId}"
                         onclick="detailInfo(this)"
                         th:each="class:${caiClass}">
                        <div class="item-box">
                            <div class="item-box-1">
                                <div class="left">
                                    <img alt="">
                                    <p th:text="${class.caiName}">瓜类</p>
                                    <div><span th:text="${class.planCounts.finished}">186</span>个</div>
                                </div>
                                <div class="right" th:attr="code = *{class.code}">
                                    <p><span th:text="${class.planCounts.finished_rate}+'%'">22.22%</span></p>
                                    <div class="record">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                        <span class="last"
                                              th:style="'height:'+${class.planCounts.finished_rate}*0.6+'px'"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>

<script th:src="@{/ruoyi/js/my-common-js.js}"></script>
<script th:inline="javascript">
    var ctx = [[@{
        /}]]
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var timestamp = new Date().getTime();
            var timestamp1 = new Date().getTime() + 1000 * 60 * 60 * 24 * 2;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
                ,
                format: "yyyy-MM-dd",
                value: new Date(timestamp)
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#test2' //指定元素
                ,
                format: 'yyyy-MM',
                value: new Date(timestamp1)
            });
        });

        $(function () {

            $("#tabList li").click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                var index = $(this).index();
                $(".btm-content .tab-content").eq(index).addClass("active").siblings().removeClass("active");
            });


            var _liArr = $('#progressBar-ul').children(".p-item")
            var _liWidth = 100 / _liArr.length
            _liArr.each(function () {
                $(this).width(_liWidth + '%')
            })

            // 生产阶段
            var _currenttep = 2
            _liArr.each(function (index) {
                if (index < _currenttep) {
                    $(this).addClass('active')
                }
            })


            //定义颜色数组
            var pic = 'dist/img/juShan-plan-icon0&&.jpg';
            var color = ["#f07849", "#755da5", "#70b012", "#52ddb2", "#0fb282", "#ff5678", "#80465e", "#a5a5a4"];
            var color1 = ["#fef9f9", "#f0eef6", "#f0f7e7", "#ecfcf7", "#e6f7f2", "#feeef1", "#f1ecef", "#f1ecef"];

            var config = {
                v_gua: {color: "#f07849", color1: '#fef9f9', pic: 1},
                v_qie: {color: "#755da5", color1: '#f0eef6', pic: 2},
                v_dou: {color: "#70b012", color1: '#f0f7e7', pic: 3},
                v_ye: {color: "#52ddb2", color1: '#ecfcf7', pic: 4},
                v_xin: {color: "#0fb282", color1: '#e6f7f2', pic: 5},
                v_cong: {color: "#ff5678", color1: '#feeef1', pic: 6},
                v_gen: {color: "#80465e", color1: '#f1ecef', pic: 7},
                v_qi: {color: "#a5a5a4", color1: '#f1ecef', pic: 8},

            }


            $(".item-box .right").each(function (i, ele) {

                var code = $(ele).attr('code')
                $(ele).children("p").css("color", config[code].color)
                var img = $('.item-box .left img')[i];
                $(img).attr('src', ctx + pic.replace('&&', config[code].pic));

                var record = $(ele).children('.record');
                $(record).children("span").css("background-color", config[code].color1)
                $(record).children(".last").css("background-color", config[code].color)

            })

        });


        function reloadIt() {
            var link = ctx + "system/ncPlan/showPlan";
            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }

        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });
        $('.thisDay').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            var day = d.getDate();
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-" + day);
            reloadIt();
        });

        function detailInfo(obj) {
            var ancestors = $(obj).attr('caiId');
            var status = $(obj).attr('status');
            var link = ctx + 'system/ncPlan/frontPlanList?ancestors=' + ancestors + "&status=" + status;
            var s = $('#startTime').val();
            var e = $('#endTime').val();
            link += "&beginTime=" + s + "&endTime=" + e;
            $.modal.openTab("育苗计划", link);
        }

        setFrontTimeShortcutBtns([[${beginTime}]], [[${endTime}]]);
        setTitle("计划管理", false);
</script>
</body>

</html>